<template>
  <view class="box">
    <view class="bgtuihuo">
      <view class="bgtuihuo1">退款成功</view>
      <view class="steps">
        <uv-steps current="2" dot activeColor="#fff" bgcolor="#fc4424">
          <uv-steps-item title="提交申请"></uv-steps-item>
          <uv-steps-item title="商家审核"></uv-steps-item>
          <uv-steps-item title="退回商品"></uv-steps-item>
          <uv-steps-item title="退款完成"></uv-steps-item>
        </uv-steps>
      </view>
    </view>
    <view class="after">
      <view class="after-content">
        <view class="bag">
          <view class="after1">
            <view class="after1-top">
              <image src="/static/店铺.png" mode=""></image>
              <view>正茂通商户</view>
            </view>
          </view>
          <view class="after2">
            <image src="/static/小米1.png"></image>
            <view class="after2-content">
              <view>男运动鞋秋季青少年正品透气夏网面减震跑步休闲旅游鞋</view>
              <view>标准白、42</view>
              <view>￥890.00
                <view style="color: #999999;">×1</view>
              </view>
            </view>
          </view>
          <view class="after4">
            <view class="after4-1">
              <view class="after4-1-1">优惠金额</view>
              <view class="after4-1-2">￥890.00</view>
            </view>
            <view class="after4-1">
              <view class="after4-1-1">运费</view>
              <view class="after4-1-2">￥0.00</view>
            </view>
            <view class="after4-2">实付
              <view class="after4-2-1">￥890.00</view>
            </view>
          </view>
          <view class="after3">
            <view>备注：</view>
            <view>请尽快发货，发顺丰</view>
          </view>
        </view>
      </view>
    </view>
    <view class="after5">
      <view class="after5-1">
        订单信息
      </view>
      <view class="after5-2" v-for="(item,index) in afterr" :key="index">
        <view class="after5-2-1">{{item.text}}</view>
        <view class="after5-2-2">{{item.text1}}</view>
      </view>
    </view>
    <view class="but">
      <button @click="open">填写物流单号</button>
    </view>
    <view>
		<uv-popup ref="popup" mode="center" @change="change" closeable round="10rpx">
			<view style="width: 600rpx; height: 340rpx;">
				<view style="width: 100%;text-align: center;font-weight: bold;margin: 30rpx 0px;font-size: 17px;">填写物流单号</view>
        <input type="text" placeholder="请输入物流单号">
        <button style="width: 90%; margin: auto;background-color: #F7433D;color: #fff;border-radius: 50rpx; margin: 36rpx 16px;">确定</button>
			</view>
		</uv-popup>
	</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        afterr: [{
            text: '订单编号',
            text1: '2021987616631'
          },
          {
            text: '下单时间',
            text1: '2021-11-12 15:58:32'
          },
          {
            text: '支付方式',
            text1: '微信支付'
          },
        ]
      }
    },
    methods: {
      open(){
				this.$refs.popup.open();
			},
			change(e){
				console.log('弹窗状态改变：',e);
			}
    }
  }
</script>

<style lang="scss">
  .box {
    width: 100%;
    margin: auto;
    background-color: #f5f5f5;
  }

  .bgtuihuo {
    width: 100%;
    height: 220rpx;
    margin: auto;
    background-color: #fc4424;
    color: #fff;
    .bgtuihuo1{
      font-size: 36rpx;
      padding: 30rpx;
    }
  }

  .steps {
    margin-top: 10rpx;
  }

  .after {
    width: 92%;
    margin: auto;
    margin-top: 30rpx;

    .after-content {
      margin-bottom: 30rpx;
      background-color: #fff;
      border-radius: 30rpx;

      .bag {
        width: 94%;
        margin: auto;
        padding-bottom: 16rpx;

        .after1 {
          display: flex;
          justify-content: space-between;
          padding-top: 20rpx;


          .after1-top {
            width: 40%;
            display: flex;

            image {
              width: 20%;
              height: 40rpx;
            }
          }

          .after1-top1 {
            width: 18%;
            display: flex;

            image {
              width: 44%;
              height: 40rpx;
            }

            view {
              font-size: 14px;
              color: #A6A6A6;
            }
          }
        }

        .after2 {
          margin-top: 30rpx;
          padding-top: 30rpx;
          margin-bottom: 20rpx;
          border-top: 1px solid #e9e9e9;
          display: flex;
          justify-content: space-between;

          image {
            width: 34%;
            height: 220rpx;
            border-radius: 10rpx;
          }

          .after2-content {
            width: 59%;
          }

          .after2-content view:nth-child(1) {
            font-size: 14px;
            padding: 10rpx 0px;
          }

          .after2-content view:nth-child(2) {
            font-size: 14px;
            padding: 14rpx 0px;
            color: #999999;
          }

          .after2-content view:nth-child(3) {
            display: flex;
            font-size: 18px;
            padding: 10rpx 0px;
          }
        }

        .after3 {
          background-color: #F5F5F5;
          width: 100%;
          height: 70rpx;
          line-height: 70rpx;
          border-radius: 10rpx;
          display: flex;
        }

        .after3 view:nth-child(1) {
          text-align: center;
          font-size: 14px;
          padding-left: 30rpx;
        }

        .after3 view:nth-child(2) {
          font-size: 14px;
          color: #565656;
        }

        .after4 {
          border-top: 1px solid #e9e9e9;

          .after4-1 {
            margin-top: 40rpx;
            display: flex;
            justify-content: space-between;
            color: #676767;
          }

          .after4-2 {
            margin-top: 30rpx;
            display: flex;
            margin-left: 434rpx;
            font-weight: bold;

            .after4-2-1 {
              color: #fc3b19;
              font-size: 36rpx;
              font-weight: normal;
            }
          }
        }
      }

    }


  }
.after5{
  width: 92%;
  margin: auto;
  border-radius: 10rpx;
  background-color: #fff;
  .after5-1{
    padding: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
  }
  .after5-2{
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color:#5c5c5c;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    
  }
}
.but {
        background-color: #fff;
        margin-top: 48rpx;
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        padding: 30rpx;

        button {
          width: 44%;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 30rpx;
          color: #fff;
          border: 1px solid #FD6F57;
          border-radius: 50rpx;
          background-color: #fc4424;
          margin-left: 400rpx;
        }
      }
      input{
        width: 90%;
        margin: auto;
        height: 80rpx;
        border: 1px solid #ACACAC;
        border-radius: 40rpx; 
        text-align: center; 
      }
</style>